<!--投票分布图-->
<style type="text/css">
	.chart-container {
		background: #000000;
		padding: 20px 0;
		color: #fff;
		text-align: center;
		margin-bottom: 50px;
	}
	.chart-container h3{
		margin-bottom: 10px;
		margin-top: 0;
	}
	.chart {
		width: 1440px;
		/*height: 400px;*/
		
		border-bottom: #F0AD4E solid 1px;
		padding-bottom: 10px;
		border-top: #F0AD4E solid 1px;
		padding-top: 10px;
		margin: 0 auto;
		/*background: #060;*/
	}
	.chart span {
		display: inline-block;
		width: 1px;
		background: #fff;
	}
	.info-container{
	    width: 1440px;
	    margin: 10px auto;
	}
	.chart-info, .driver-info{
		width: 300px;
		text-align: left;
		float: left;
	}
</style>

<volist name="votes" id="vo">
    <div id="chart-{$vo.date}" class="chart-container clearfix">
        <h3>每日得票分布图(日期：{$vo.date})</h3>
        <div class="chart">
        </div>
        <div class="info-container">
            <ul class="driver-info">
                <li>姓名：<span class="">{$driver.name} </span></li>
                <li>电话：<span class="">{$driver.tel}</span></li>
                <li>服务号：<span class="">{$driver.service_no}</span></li>
                <li>车牌号：<span class="">{$driver.plate_number}</span></li>
            </ul>
            <ul class="chart-info">
                <li>开始时间：<span class="time-start"></span></li>
                <li>结束时间：<span class="time-end"></span></li>
                <li>得票数量：<span class="count"></span></li>
                <li>分钟最高：<span class="minute-max"></span></li>
            </ul>
        </div>
    </div>
</volist>



<script type="text/javascript">
    var votes = {:json_encode($votes)};
</script>

<script type="text/javascript">
    
    function padString(str){
        if((str+"").length<2){
            str = "0"+str;
        }
        return str;
    }

    function formatDate(timestamp) {
        var now = new Date(timestamp);
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        var hour = padString(now.getHours());
        var minute = padString(now.getMinutes());
        var second = padString(now.getSeconds());
        return year + "年" + month + "月" + date + "日" + hour + "时" + minute + "分";
    }
    
    function getPixel(data,timeStart) {
        var arrPixel = [];
        for (var i = 0, l = data.length; i < l; i++) {
            var timestamp = timeStart + i * 60;

            arrPixel.push("<span style='height:" + data[i] * 10 + "px' title='" + formatDate(timestamp * 1000) + "：" + data[i] + "'></span>");
        }
        return arrPixel.join('');
    }
    
	function showVoteChart(container,data){
	    var $container = $(container);
	    var arr = [];
        var topIndex = 0;
        var topCount = 0;
        for (var j = 0; j < 1440; j++) {
            arr[j] = 0;
        }
        if(data.lists && data.lists.length!=undefined){
            for (var i = 0, l = data.lists.length; i < l; i++) {
                var v = data.lists[i];
                var index = parseInt((v.t - data.timeStart) / 60);
                arr[index] ++;
                if (arr[index] > topCount) {
                    topCount = arr[index];
                    topIndex = i;
                }
            }
        }
        
        $container.find('.chart').html(getPixel(arr,data.timeStart))
        $container.find('.time-start').html(formatDate(data.timeStart*1000));
        $container.find('.time-end').html(formatDate(data.timeEnd*1000));
        $container.find('.count').html(data.count);
        $container.find('.minute-max').html(formatDate((data.timeStart + topIndex * 60) * 1000) + ": " + topCount);
	}
	for(var i=0,l=votes.length;i<l;i++){
	    showVoteChart("#chart-" + votes[i]['date'],votes[i]);
	}
</script>

